<template>
  <div class="layout">
    <el-form ref="formRef" :model="form" label-width="96px" class="searchForm">
      <el-form-item label="图片搜索">
        <el-input v-model="input4" class="search_item" placeholder="请输入标题进行查找"></el-input>
      </el-form-item>
      <el-form-item label="上传者">
        <el-select class="search_item" v-model="form.region" placeholder="全部">
          <el-option label="Zone one" value="shanghai"></el-option>
          <el-option label="Zone two" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="上传时间" class="selectTime">
        <div class="picker_time">
          <el-date-picker v-model="form.date1" :type="props.text == 'text' ? 'datetime' : 'date'" value-format="YYYY-MM-DD hh:mm:ss A" placeholder="开始时间" style="width: 100%"></el-date-picker>
        </div>
        <div class="text-center"></div>
        <div class="picker_time">
          <el-date-picker v-model="form.date2" :type="props.text == 'text' ? 'datetime' : 'date'" value-format="YYYY-MM-DD hh:mm:ss a" placeholder="结束时间" style="width: 100%"></el-date-picker>
        </div>
      </el-form-item>
    </el-form>
    <el-form ref="formRef" :model="form" label-width="96px" class="searchForm">
      <el-form-item label="图片类型一二">
        <el-select class="search_item" v-model="form.region" placeholder="全部类型">
          <el-option label="普通图片" value="1"></el-option>
          <el-option label="雷达图片" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="标签筛选">
        <el-select class="search_item" v-model="form.region" placeholder="全部">
          <el-option label="普通图片" value="1"></el-option>
          <el-option label="雷达图片" value="2"></el-option>
        </el-select>
      </el-form-item>
      <div class="search_btn">
        <el-button type="primary" @click="onSubmit">查询</el-button>
        <el-button>清空</el-button>
      </div>
    </el-form>
  </div>
</template>

<script setup lang="ts">
  // import
  import { reactive } from 'vue'
  const form = reactive({
    name: '',
    region: '',
    date1: '',
    date2: '',
    delivery: false,
    type: [],
    resource: '',
    desc: ''
  })
  const props = defineProps<{
    text: {
      type: String
      default: 'text'
    }
  }>()
  const onSubmit = () => {
    console.log('submit!')
  }
</script>
.select_option{ z-index: 2000!important; }
<style lang="scss" scoped>
  .layout {
    padding: 9px 20px 9px 12px;
    background: #f9f9f9;
    display: flex;
    flex-direction: column;
    .searchForm {
      display: flex;
      position: relative;
      .search_item {
        max-width: 180px;
        margin-bottom: 0;
        // margin-right: 96px;
      }
      :deep .el-form-item {
        margin: 5px;
      }
      .picker_time {
        min-width: 110px;
      }
      .selectTime {
        :deep .el-form-item__content {
          display: flex;
          align-items: center;
          .text-center {
            min-width: 14px;
            margin: 0 13px;
            border-top: 1px solid #969696;
          }
        }
      }
      .search_btn {
        position: absolute;
        top: 5px;
        right: 0;
      }
    }
  }
</style>
